<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!-- 1.画圆
		     2.画三角形
			思路1：  html   div元素
			        css   倒角  必须有边框
			思路2：  html   div元素 #triangle
			        css   斜边
					       不设置宽高
						   左边框 50像素实线红色    transparent
						   右边框 50像素实线绿色    transparent
						   下边框 50像素实线蓝色  透明度 .3
						   颜色值  rgba（255，255，0，）
		-->
	<style>
		/* 1.画圆 */
		div#circle{
		width: 200px;
		height: 200px;
		border: 1px solid #ffaaff;
		border-radius:100px 100px 100px 100px;
		/* 边框阴影属性：box-shadow属性 */
		box-shadow: 10px 10px 100px 10px #ffaaff inset;
		}
		div#triangle{
			width: 0;
			/* border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 50px solid rgba(0, 0, 255, .3); */
			border: 50px solid transparent;
			border-top-color: rgba(0, 0, 255, .3);
		}
		input{
			outline: 1px solid red;
			outline: 0;
			/* 去掉边框效果，通配选择器中 */
		}
	</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框: <input type="text" >
	</body>
</html>